<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-22 10:46:24
-->
<template>
  <van-action-sheet v-model:show="show"   title="新增地址">
    <div class="content">
      <van-field
        v-model="data.name"
        name="用户名"
        label="用户名"
        placeholder="用户名"
      />
      <van-field
        v-model="data.mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        maxlength="11"
        type="tel"
      />
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="showAddr = true"
      />
      <van-popup v-model:show="showAddr" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="showAddr = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>
      <van-field
        rows="3"
        autosize
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
        v-model="data.addr"
      />
      <div class="default">
        <span>设置默认地址:</span>
        <van-switch v-model="data.isDefault" />
      </div>
      <van-button type="primary" block round @click="handleAdd"
        >添加地址</van-button
      >
    </div>
  </van-action-sheet>
</template>

<script>
import { Toast } from "vant";
import { defineComponent, nextTick, reactive, ref, watch } from "vue";
import { ApiGetArea, ApiAddAddr, ApiGetReceiverID } from "../../../api/mall";
export default defineComponent({
  setup(props,{emit}) {
    const show = ref(false);
    const showAddr = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");
    const options = ref([]);
    //  {
    //     text: '浙江省',
    //     value: '330000',
    //     children: [],
    //   },
    const init = async (pcode) => {
      const res = await ApiGetArea({ pcode });
      if (res && res.length) {
        const arr = res.map((el) => {
          return {
            text: el.name,
            value: el.code,
            children: [],
          };
        });
        options.value = arr;
      }
    };
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        }
      }
    );

    const onChange = async ({ value, selectedOptions, tabIndex }) => {
      if (selectedOptions.length == 1) {
        data.provinceCode = value;
      } else if (selectedOptions.length == 2) {
        data.cityCode = value;
      } else if (selectedOptions.length == 3) {
        data.areaCode = value;
      } else {
        data.streetCode = value;
      }
      const res = await ApiGetArea({ pcode: value });
      if (res) {
        var arrChild = res.map((el) => {
          return {
            text: el.name,
            value: el.code,
            children: [],
          };
        });
        bianli(options.value, value, arrChild);
        fieldValue.value = selectedOptions
          .map((option) => option.text)
          .join("/");
      }
    };
    const bianli = function (arr, id, children) {
      if (!arr.length) {
        return false;
      }
      arr.forEach((el) => {
        if (el.value === id) {
          el.children = children ? children : null;
        }
        if (el.children.length) {
          return bianli(el.children, id, children);
        }
      });
    };
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join("/");
    };

    const data = reactive({
      provinceCode: "",
      cityCode: "",
      areaCode: "",
      streetCode: "",
      name: "",
      mobile: "",
      isDefault: "",
      addr: "",
      addressId: "",
    });

    const handleAdd = async () => {
      data.isDefault ? (data.isDefault = 1) : (data.isDefault = 0);
      const id = await ApiGetReceiverID({});
      data.addressId = id
      if (id) {
        const res = await ApiAddAddr(data);
        if(typeof res === 'object'){
            show.value = false
            Toast.success('添加成功！')
            emit('handleSucc')
        }
      }
    };
    return {
      data,
      showAddr,
      options,
      show,
      fieldValue,
      cascaderValue,
      onChange,
      onFinish,
      handleAdd,
    };
  },
});
</script>
<style scoped lang='scss'>
.content {
  font-size: 14px;
  min-height: 400px;
  padding: 10px;
}
.default {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 20px;
  span {
    margin-right: 20px;
  }
}
</style>